<html>
  <head>
    <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/css/main.css" />
    <meta content={{ keywords }} name='keywords' />
    <meta content={{ description }} name="description" />
    <title>{{ title }}</title>
  </head>

  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Qeeniao Task</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/admin">任务 <span class="sr-only">(current)</span></a></li>
          </ul>
          
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="container" style="margin-top: 60px">
      <div class="panel panel-default" >
        <div class="panel-heading">
          任务列表 
          <a class="btn btn-sm btn-primary pull-right" style="margin-top:-5px" href="/admin/task/add">添加任务</a>
          <a class="btn btn-sm btn-primary pull-right" style="margin-top:-5px; margin-right: 10px" href="/admin/task/export">导入任务</a>
        </div>
        <div class="panel-body">
          {% if task %}
          {% for task_group in task %}
          <table class="table">
            <thead>
              <tr>
                <th>{{ loop.key }} <a target="_blank" href="/task/group/{{ loop.key }}" class="label label-primary">任务链接地址</a></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div class="row masonry-container">
                    {% if task_group %}
                    {% for task_item in task_group %}

                    <div class="col-md-6 item">
                      <div class="panel panel-default">
                        
                        <div class="panel-heading">
                          <h3 class="panel-title">
                          {{ task_item.attributes.name }}：
                          <span class="pull-right">
                            <a target="_blank" href="/task/detail/{{ task_item.attributes._id.toString() }}" class="label label-primary" style="color: white">任务详情</a>
                            <a class="label label-default deleteTask" data-attr-id="{{ task_item.attributes._id.toString() }}" style="color:white">删除任务</a>
                          </span>
                          
                          </h3>
                        </div>
                        <div class="panel-body">
                          <ul class="list-group">
                            <li class="list-group-item">描述：{{ task_item.attributes.description }}</li>
                          </ul>
                          <ul class="list-group">
                            <li class="list-group-item">要求：{{ task_item.attributes.demand }}</li>
                          </ul>

                          <ul class="list-group">
                            {% for task_list in task_item.list %}
                            <li class="list-group-item">
                            {{ task_list.attributes.name }}
                            {% if task_list.attributes.complete %}
                            <span class="label label-success">已完成</span>
                            {% else %}
                            <span class="label label-default">未完成</span>
                            {% endif %}
                            
                            </li>
                            {% endfor %}
                          </ul>

                          <ul class="list-group">
                            <li class="list-group-item">
                              <a class="btn btn-primary" target="_blank" href="/admin/downloadImageZip/{{ task_item.attributes._id.toString() }}">下载全图</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    {% endfor %}
                    {% endif %}
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          {% endfor %}
          {% endif %}
        </div>
      </div>
    </div>
    
  </body>
  <script type="text/javascript" src="//cdn.bootcss.com/jquery/2.0.1/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="//cdn.bootcss.com/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
  <script type="text/javascript" src="//cdn.bootcss.com/masonry/3.2.3/masonry.pkgd.min.js"></script>
  <script type="text/javascript" src="/js/main.js"></script>
  <script type="text/javascript">
    $(function(){
      var $container = $('.masonry-container');
      $container.imagesLoaded( function () {
        $container.masonry({
          columnWidth: '.item',
          itemSelector: '.item'
        });
      });

      //删除任务
      $('.deleteTask').click(function(){
        var id = $(this).attr('data-attr-id');
        if(confirm('确定删除此任务？')){
          $.ajax({
            'url':'/admin/task/delete/'+id,
            'type':"POST",
            'dataType':'json',
            'success':function(data){
              if(data['success']){
                window.location.reload();
              }
            },
            'beforeSend':function(){
              //等待状态开始
            },
            'complete':function(){
              //等待状态结束
            }
          });
          return false;
          // window.location.reload();
        }
      });
    })
  </script>
</html>